<template>
	<view class="rela">
		<cu-custom rightAll>
			交易详情
		</cu-custom>
		<feedback-fixed top="26%"></feedback-fixed>
		<view class="main padding " v-if="infos" @longpress="showEditModal">
			<view class="bgcolor-ffffff padding info-box">
				<view class="money u-flex-y u-flex-items-center u-flex-center">
					<text class="money__title font-weight-500" :class="TYPEENUM[infos.type].className">
						{{TYPEENUM[infos.type].symbol}}￥{{priceFormat(infos.amountMoney)}}
					</text>
					<text class="money__desc margin-top-sm">
						账户余额￥{{priceFormat(infos.currentBalance)}}
					</text>
				</view>
				<view class="detail-box u-flex-y padding-top-lg">
					<view class="detail-item u-flex u-flex-items-center u-flex-between">
						<text class="title">交易卡号</text>
						<text class="value font-weight-500">{{_userinfo.encryCardNum}}</text>
					</view>
					<view class="detail-item u-flex u-flex-items-center u-flex-between">
						<text class="title">交易时间</text>
						<text class="value font-weight-500">{{infos.timeStamp | date('yyyy/mm/dd hh:MM:ss')}}</text>
					</view>
					<view class="detail-item u-flex u-flex-items-center u-flex-between">
						<text class="title">摘要</text>
						<text class="value font-weight-500">{{infos.abstractInfo}}</text>
					</view>
					<view class="detail-item u-flex u-flex-items-center u-flex-between">
						<text class="title">收款人</text>
						<text class="value font-weight-500">{{infos.receivingName}}</text>
					</view>
					<view class="detail-item u-flex u-flex-items-center u-flex-between">
						<text class="title">收款账号</text>
						<text class="value font-weight-500">{{formatCardNum(infos.oppositeAccount, '*********')}}</text>
					</view>
					<view class="detail-item u-flex u-flex-items-center u-flex-between">
						<text class="title">收款行名</text>
						<text class="value font-weight-500">{{infos.receivingBank}}</text>
					</view>
					<view class="detail-item u-flex u-flex-items-center u-flex-between">
						<text class="title">附言</text>
						<text class="value font-weight-500">无附言</text>
					</view>
				</view>
			</view>
		</view>

		<u-modal :show="showInfoModal" title="修改流水信息" @confirm="editInfo" @cancel="closeModal" showCancelButton>
			<u--form
				labelPosition="left"
				:model="form"
				ref="form">
				<u-form-item
					label="摘要"
					prop="form.abstractInfo"
					borderBottom>
					<u--input
						v-model.trim="form.abstractInfo"
						border="none"></u--input>
				</u-form-item>
				<!-- <u-form-item
					label="交易地点/附言"
					prop="form.postscript"
					borderBottom>
					<u--input
						v-model.trim="form.postscript"
						border="none"></u--input>
				</u-form-item> -->
				<u-form-item
					label="交易时间"
					prop="form.createTime"
					borderBottom>
					<text @click="showDateModal = true">
						{{form.timeStamp | date('yyyy/mm/dd hh:MM:ss')}}
					</text>
				</u-form-item>
				<u-form-item
					label="收款账户"
					prop="form.oppositeAccount"
					borderBottom>
					<u--input
						v-model.trim="form.oppositeAccount"
						border="none"></u--input>
				</u-form-item>
				<u-form-item
					label="收款人"
					prop="form.receivingName"
					borderBottom>
					<u--input
						v-model.trim="form.receivingName"
						border="none"></u--input>
				</u-form-item>
				<u-form-item
					label="收款行名"
					prop="form.receivingBank"
					borderBottom>
					<u--input
						v-model.trim="form.receivingBank"
						border="none"></u--input>
				</u-form-item>
				<u-form-item
					label="金额"
					prop="form.amountMoney"
					borderBottom>
					<u--input
						type="number"
						v-model.trim="form.amountMoney"
						border="none"></u--input>
				</u-form-item>
				<u-form-item
					label="类型"
					prop="form.type"
					borderBottom>
					<u-radio-group
						v-model="form.type"
						shape="circle"
						placement="row">
						<u-radio activeColor="green" label="支出" :name="0"></u-radio>
						<u-radio activeColor="red" label="收入" :name="1"></u-radio>
					</u-radio-group>
				</u-form-item>
			</u--form>
		</u-modal>
		<u-datetime-picker v-if="form.timeStamp"
			:show="showDateModal"
			v-model="form.timeStamp"
			@cancel="closeDateModal"
			@confirm="closeDateModal"
			mode="datetime"></u-datetime-picker>
	</view>
</template>

<script>
	import NavbarMixins from '@/common/mixins/navbar-mixins.js'
	import { TYPEENUM } from '@/common/data/Enum.js'

	export default {
		mixins: [NavbarMixins()],
		data() {
			return {
				TYPEENUM,
				infos: null,
				form: {
					abstractInfo: '',
					oppositeAccount: '',
					timeStamp: 0,
					postscript: '',
					type: 0,
					amountMoney: 0,
					receivingBank: '',
					receivingName: ''
				},
				showInfoModal: false,
				showDateModal: false
			};
		},
		onLoad() {
			this.$Tips.loading('请稍后');
			setTimeout(() => {
				try {
					this.infos = this.$store.state.params
				} catch (e) {
					//TODO handle the exception
					console.debug('onLoad err', e);
				}
				this.$Tips.loaded();
			}, 300)
		},
		methods: {
			showEditModal() {
				let form = {};
				Object.keys(this.infos).forEach(key => {
					form[key] = this.infos[key];
				})
				this.form = form;
				console.debug(this.form);
				this.showInfoModal = true
			},

			editInfo() {
				this.$Tips.loading('请稍后...');
				this.$api.updateBankFlowingwater({
					id: this.infos.id,
					...this.form
				}).then(() => {
					this.infos = {
						...this.infos,
						...this.form
					}
					this.$store.dispatch('set_params', { isEditBankFlowInfo: true });
				}).catch(err => {
					console.debug('updateBankFlowingwater err', err);
					this.$Tips.toast('修改错误...');
				}).finally(() => {
					this.$refs.form.resetFields();
					this.closeDateModal();
					this.closeModal();
					this.$Tips.loaded();
				})
			},
			closeModal() {
				this.showInfoModal = false;
			},
			closeDateModal() {
				this.showDateModal = false
			},
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: rgb(233, 235, 234);
	}
	.main {
		// background-color: rgb(233, 235, 234);
		.info-box{
			border-radius: 12rpx;
		}
		.money {
			&__title {
				font-size: 46rpx;
			}

			&__desc {
				color: rgb(164, 164, 164);
				font-size: 26rpx;
			}
		}

		.detail-box {
			.detail-item {
				margin-top: 20rpx;
				font-size: 30rpx;
				font-weight: 500;
				.title {
					color: rgb(112, 112, 112);
				}

				.value {
					text-align: right;
					width: 350rpx;
					word-break: break-all;
				}
			}
		}
	}
</style>
